iT邦幫忙

2024 iThome 鐵人賽

DAY 4
0
Modern Web

與 AI 一起開發 Side Project 吧!系列 第 4

Day4 — 教你「 AI 程式編輯器 Cursor IDE」如何一秒快速上手!

  • 分享至 

  • xImage
  •  

我們之前介紹了 Cursor IDE 的厲害之處,實際進到專案寫 Code 之前,先介紹大家一些基本用法,以及 IDE 的特性。

讓大家可以快速上手,馬上就讓 AI 幫你寫 Code!


基本用法

簡易 Prompt 指令

  • 指令:⌘ + K
  • 會在程式碼「臨近」的 scope 區塊,跳出 prompt 彈窗,輸入指令讓 AI 幫忙新增 / 調整程式碼。
  • 如以下所示,我想要請 AI 幫忙「重構」此段程式碼,讓該部分程式碼變得更容易閱讀。

https://ithelp.ithome.com.tw/upload/images/20240914/20168308mFMV1ByWWh.jpg

Cursor 就會直接幫我修改,刪掉的地方會標示紅色,而新增的則是綠色,跟 Git 的 commit 修改記錄的 UI 一樣,相當直覺。

開啟 AI Chat 對話

  • 指令:⌘ + Shift + L
  • 比起簡易 Prompt 指令,用 Chat 對話的方式,可以在「整個檔案」的範圍做修改,且讀取整個專案的上下文(@codebase),做到大範圍的新增 / 修改。
  • 如以下所示,請 AI 幫忙新增一個功能,讓資料可以多夾帶 時間戳記 在其中。
    https://ithelp.ithome.com.tw/upload/images/20240914/20168308fM9vPTYRUL.jpg

接著按下右上角的 Apply,就會把這一段生成的程式碼,直接貼到既有的檔案之中做修改囉!

https://ithelp.ithome.com.tw/upload/images/20240914/20168308P6fif9VmGx.jpg

自動完成 Cursor Tab

  • 指令:Tab
  • 跟 Copilot 用法差不多,只是提供程式碼建議這方面更為強大,且在記憶程式碼上下文也比較厲害。
    • 除了建議比較精準以外,也不用提前「訓練」資料集,不用像 Copilot 那樣,還要一段時間的「訓練期」,讓 AI 去學我們的程式碼編寫習慣。
    • Cursor Tab 整體提供建議的速度快很多,而且我還沒寫多少程式碼,就可以猜到我「接下來想寫」的程式碼。
  • 缺點是免費版只有 2000 次的自動完成建議。用了一陣子發現真的很好用,而且免費額度實在不太夠用,所幸就直接付錢訂閱了(笑。

其他指令呢?

基本上 IDE 指令都跟 VSCode 一樣,之前的文章也有介紹過 VSCode 常用的快捷鍵,這裡便不額外贅述了。

因為 Cursor IDE 就是基於 VSCode 「擴展」而來的 AI 整合 IDE 工具。但也因此,會有人 concern 說這個 IDE 為何不要「作為一款 VSCode plugin」就好? 何必又載一款 IDE 來用?

不過有沒有必要做為 IDE 這個議題,就不在這次的討論範疇,畢竟像我在開發也不是完全移到 Cursor 上面,因此也沒什麼資格好說嘴的的(笑。


REF

更多的指令與詳細介紹,大家可以到官網去看看喔 :)


上一篇
Day3 — AI 程式碼編輯器 Cursor IDE 簡介
下一篇
Day5 — 跬步千里 | 挑個 Side Project ,就做記帳 App,先列出需求吧!
系列文
與 AI 一起開發 Side Project 吧!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言